<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>面向旅游的航空出行分析系统</title>
	<link rel="stylesheet" href="css/index.css" />
</head>

<body>
	<!-- 头部的盒子 -->
	<header>
		<h1>面向旅游的航空出行分析系统</h1>
	</header>
	
	<!-- 页面主体部分 -->
	<section class="mainbox">
		<div class="column">
			<div class="panel bar">
				<h2>出行高峰时段</h2>
				<div class="chart"></div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line">
				<h2>人群月度变化</h2>
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel pie">
				<h2>出行人群占比</h2>
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>
		</div>
		<div class="column">
			<div class="no">
				<div class="no-hd">
					<ul>
						<li style="color:rgba(0, 128, 0, 0.9)">125811</li>
						<li style="color: orange;">146981</li>
					</ul>
				</div>
				<div class="no-bd">
					<ul>
						<li>已登机人数</li>
						<li>未登机人数</li>
					</ul>
				</div>
			</div>
			<!-- 地图模块 -->
			<div class="map">
				<div class="map1"></div>
				<div class="map2"></div>
				<div class="map3"></div>
				<div class="chart"></div>
			</div>
		</div>
		<div class="column">
			<div class="panel bar2">
				<h2>服务需求数量</h2>
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel line2">
				<h2>同时段客流量对比(单位：千)</h2>
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>
			<div class="panel pie2">
				<h2>航班地区分布</h2>
				<div class="chart">图表</div>
				<div class="panel-footer"></div>
			</div>
		</div>
	</section>

	<script src="js/flexible.js"></script>
	<script src="js/echarts.min.js"></script>
	<!-- 先引入jquery -->
	<script src="js/jquery.js"></script>
	<!-- 使用中国地图必须先引入这个china.js -->
	<script src="js/china.js"></script>
	<script src="js/index.js"></script>
</body>

</html>